<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none;
            /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }

        #pageBox {
            overflow: hidden;
        }

        .count {
            display: flex;
            flex-direction: row;
            background: #fff;
            height: 80px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        .count>div {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .data {
            font-size: 1.5em;
        }
    </style>

</head>

<body>

    <div style="padding: 15px;" id="pageBox">
        <div class="count-box">
            <div class="layui-row layui-col-space16">
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-green center">
                            <i class="layui-icon layui-icon-rate-solid"></i>
                            收藏夹
                        </div>
                        <div class="data" id="favoriteCount">100</div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-blue center">
                            <i class="layui-icon layui-icon-engine"></i>
                            车次
                        </div>
                        <div class="data" id="lineCount">100</div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-red center">
                            <i class="layui-icon layui-icon-form"></i>
                            订单
                        </div>
                        <div class="data" id="ordertextCount">100</div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-orange center">
                            <i class="layui-icon layui-icon-transfer"></i>
                            站台
                        </div>
                        <div class="data" id="stationCount">100</div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-cyan center">
                            <i class="layui-icon layui-icon-group"></i>
                            用户
                        </div>
                        <div class="data" id="userCount">100</div>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="count">
                        <div class="title layui-bg-purple center">
                            <i class="layui-icon layui-icon-user"></i>
                            管理员
                        </div>
                        <div class="data" id="adminCount">100</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-bg-gray" style="padding: 16px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-carousel" id="ID-carousel-demo-1">
                        <div carousel-item>
                            <div>
                                <img src="/res/images/img.png" alt="" width="800px" height="500px">
                            </div>
                            <div>
                                <img src="/res/images/OIP-C (3).jpg" alt="" width="800px" height="500px">
                            </div>
                            <div>
                                <img src="/res/images/下载 (1).jpg" alt="" width="800px" height="500px">
                            </div>
                            <div>
                                <img src="/res/images/OIP-C (2).jpg" alt="" width="800px" height="500px">
                            </div>
                            <div>
                                <img src="/res/images/OIP-C.jpg" alt="" width="800px" height="500px">
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md6" style="height: 500px;">
                    <div class="layui-card">
                        <div class="layui-card-header">站点信息</div>
                        <div class="layui-timeline" style="padding: 20px;">
                            <div class="layui-timeline-item">
                              <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                              <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">清光绪二十一年（1895年），张之洞再次吁请修筑卢汉铁路，称“中国应开铁路之地甚多，当以卢汉一路为先务”。</div>
                              </div>
                            </div>
                            <div class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                                <div class="layui-timeline-content layui-text">
                                  <div class="layui-timeline-title">清光绪二十四年（1898年），几乎在卢汉铁路动工时，汉口的车站也开始兴建。因建在清末汉口城堡大智门外而得名“大智门火车站”。</div>
                                </div>
                              </div>
                            <div class="layui-timeline-item">
                              <i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
                              <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">清光绪二十九年（1902年），大智门火车站建成并投入使用。</div>
                              </div>
                            </div>
                            <div class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
                                <div class="layui-timeline-content layui-text">
                                  <div class="layui-timeline-title">清光绪三十二年（1906年）4月1日，汉口至北京正阳门铁路全线建成通车，改“芦汉铁路”为“京汉铁路”，汉口这端的终点车站就是大智门火车站。时任湖广总督张之洞在大智门车站主持京汉铁路通车典礼。</div>
                                </div>
                              </div>
                            <div class="layui-timeline-item">
                              <i class="layui-icon layui-timeline-axis layui-icon-face-smile"></i>
                              <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">1950年8月，大智门火车站改称为汉口站，定为一等站，开始办理客运、售票业务。</div>
                              </div>
                            </div>
                            <div class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis layui-icon-fire"></i>
                                <div class="layui-timeline-content layui-text">
                                  <div class="layui-timeline-title">2010年春运期间，新汉口站部分投入使用，并且由原来的一等站升级为特等站 [25]；9月，汉口站南广场改造工程动工 [29]；12月28日，与汉口站配套的汉口动车运用所投入使用。</div>
                                </div>
                              </div>
                              <div class="layui-timeline-item">
                                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
                                <div class="layui-timeline-content layui-text">
                                  <div class="layui-timeline-title">2011年1月，汉口站站房改造完工并全面投入使用。</div>
                                </div>
                              </div>
                          </div>
                    </div>
                </div>
                <!-- <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">热搜歌单TOP10</div>
                        <div class="layui-card-body">
                            <div id="hotMusiclist" style="width: 100%;height: 280px"></div>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">热搜歌手TOP10</div>
                        <div class="layui-card-body">
                            <div id="hotSinger" style="width: 100%;height: 280px"></div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script src="../res/echarts/echarts.js"></script>
    <script>
        //JS
        layui.config({
            base: '/echarts/'
        }).use(function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$
                , echarts = layui.echarts;
            var carousel = layui.carousel;
            // 渲染 - 常规轮播
            carousel.render({
                elem: '#ID-carousel-demo-1',
                width: 'auto',
                height: '500px'
            });
            $.get('http://127.0.0.1:8080/favorite/listAll', function (resp) {
                let list = resp.data
                $('#favoriteCount').text(list.length)
            })
            $.get('http://127.0.0.1:8080/line/listAll', function (resp) {
                let list = resp.data
                $('#lineCount').text(list.length)
            })
            $.get('http://127.0.0.1:8080/order/listAll', function (resp) {
                let list = resp.data
                $('#ordertextCount').text(list.length)
            })
            $.get('http://127.0.0.1:8080/station/listAll', function (resp) {
                let list = resp.data
                $('#stationCount').text(list.length)
            })
            $.get('http://127.0.0.1:8080/user/listAll', function (resp) {
                let list = resp.data
                $('#userCount').text(list.length)
            })
            $.get('http://127.0.0.1:8080/admin/listAll', function (resp) {
                let list = resp.data
                $('#adminCount').text(list.length)
            })



        });
    </script>
</body>

</html>